<template>
    <div>
        <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>租赁管理</el-breadcrumb-item>
            <el-breadcrumb-item>所有车辆</el-breadcrumb-item>
        </el-breadcrumb>
        <el-card class="box-card">
            <!-- 搜索与添加区域 -->
            <el-row :gutter="20">
                <el-col :span="7">
                    <el-input placeholder="请输入内容" v-model="query" clearable>
                        <el-button slot="append"  @click="serch" icon="el-icon-search"></el-button>
                    </el-input>
                </el-col>
                <el-col :span="4">
                    <el-button type="primary" @click="addInfo">添加车辆</el-button>
                </el-col>
            </el-row>
            <el-table
                    :data="tableData"
                    stripe
                    border
                    style="width: 100%;">
                <el-table-column
                        fixed
                        prop="id"
                        label="id"
                >
                </el-table-column>
                <el-table-column
                        prop="carname"
                        label="车辆名称"
                >
                </el-table-column>
                <el-table-column
                        prop="typeName"
                        label="类型"
                >
                </el-table-column>
                <el-table-column
                        prop="name"
                        label="品牌"
                >
                </el-table-column>
                <el-table-column
                        prop="configName"
                        label="车辆配置"
                >
                </el-table-column>
                <el-table-column
                        prop="intro"
                        label="介绍"
                >
                </el-table-column>
                <el-table-column
                        prop="vin"
                        label="识别码"
                >
                </el-table-column>
                <el-table-column
                        prop="buyPrice"
                        label="购买价格"
                >
                </el-table-column>
                <el-table-column
                        prop="rentalPrice"
                        label="出租价格"
                >
                </el-table-column>
                <el-table-column
                        prop="status"
                        label="车辆状态"

                >
                    <template slot-scope="scope">
                        <el-tag type="success" v-if="scope.row.status==1" >可出租</el-tag>
                        <el-tag type="danger" v-else-if="scope.row.status==2">维修中</el-tag>
                        <el-tag type="warning" v-else-if="scope.row.status==3">出租中</el-tag>
                        <el-tag type="info" v-else-if="scope.row.status==4">已停用</el-tag>
                    </template>
                </el-table-column>
                <el-table-column
                        prop="safeStatus"
                        label="保险"

                >
                    <template slot-scope="scope">
                        <el-tag v-if="scope.row.safeStatus==0" >已购买</el-tag>
                        <el-tag type="danger" v-else>未购买</el-tag>
                    </template>
                </el-table-column>
                <el-table-column
                        prop="shopName"
                        label="所属门店"
                >
                </el-table-column>

                <el-table-column
                        fixed="right"
                        label="操作"
                        align="center"
                        width="150"
                >
                    <template slot-scope="scope">
                        <el-button type="primary" icon="el-icon-edit" @click="EditInfo(scope.row.id)"  size="medium" circle></el-button>
                        <el-button type="danger" icon="el-icon-delete"  size="medium" @click="delInfo(scope.row.id,scope.row.status)" circle></el-button>
                        <el-button type="success" icon="el-icon-picture" size="medium" @click="ImageInfo(scope.row.id)"  circle></el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="currentPage"
                    :page-sizes="[5, 10, 15, 20]"
                    :page-size="pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total">
            </el-pagination>

            <!--修改弹框的 表单 -->
            <el-dialog
                    title="修改信息"
                    :visible.sync="EditDialogVisible"
                    @close="closeAll"
                    width="50%"
            >
                <el-form :model="EditFormData" status-icon :rules="EditFormInfos" ref="EditRuleForm" label-width="140px" class="demo-ruleForm">
                    <el-form-item label="车辆名称" prop="carname">
                        <el-input type="text" v-model="EditFormData.carname" autocomplete="off" ></el-input>
                    </el-form-item>
                    <el-form-item label="车辆类型" prop="typeId">
                        <el-select v-model="EditFormData.typeId" filterable placeholder="请选择">
                            <el-option
                                    v-for="item in types"
                                    :key="item.id"
                                    :label="item.typeName"
                                    :value="item.id">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="车辆品牌" prop="brandId">
                        <el-select v-model="EditFormData.brandId" filterable placeholder="请选择">
                            <el-option
                                    v-for="item in brands"
                                    :key="item.id"
                                    :label="item.name"
                                    :value="item.id">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="车辆配置" prop="configId">
                        <el-select v-model="EditFormData.configId" filterable placeholder="请选择">
                            <el-option
                                    v-for="item in configs"
                                    :key="item.id"
                                    :label="item.configName"
                                    :value="item.id">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="车辆识别码" prop="vin">
                        <el-input type="text" readonly v-model="EditFormData.vin" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="购买价格" prop="buyPrice">
                        <el-input type="text" v-model="EditFormData.buyPrice" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="所属店铺" prop="shopId">
                        <el-select v-model="EditFormData.shopId" filterable placeholder="请选择">
                            <el-option
                                    v-for="item in shops"
                                    :key="item.id"
                                    :label="item.shopName"
                                    :value="item.id">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="出租价格" prop="rentalPrice">
                        <el-input type="text" v-model="EditFormData.rentalPrice" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="介绍" prop="intro">
                        <el-input type="textarea" v-model="EditFormData.intro" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="车辆状态" prop="status">
                        <template>
                            <el-radio v-model="EditFormData.status" :label="1">可出租</el-radio>
                            <el-radio v-model="EditFormData.status" :label="2">维修中</el-radio>
                            <el-radio v-model="EditFormData.status" :label="3">出租中</el-radio>
                            <el-radio v-model="EditFormData.status" :label="4">已停用</el-radio>
                        </template>
                    </el-form-item>
                    <el-form-item label="保险" prop="safeStatus">
                        <template>
                            <el-radio v-model="EditFormData.safeStatus" :label="0">已购买</el-radio>
                            <el-radio v-model="EditFormData.safeStatus" :label="1">未购买</el-radio>
                        </template>
                    </el-form-item>

                    <el-form-item>
                        <el-button @click="EditDialogVisible = false">取 消</el-button>
                        <el-button type="primary" @click="confirmEditInfo">确 定</el-button>
                    </el-form-item>
                </el-form>
                <!--<span slot="footer" class="dialog-footer">
                  <el-button @click="EditDialogVisible = false">取 消</el-button>
                  <el-button type="primary" @click="confirmEditBrand">确 定</el-button>
                </span>-->
            </el-dialog>

            <!--添加弹框的 表单 -->
            <el-dialog
                    title="添加信息"
                    :visible.sync="AddDialogVisible"
                    @close="closeAll"
                    width="50%"
            >
                <el-form :model="AddFormData" status-icon :rules="AddFormInfos" ref="EditRuleForm" label-width="140px" class="demo-ruleForm">
                    <el-form-item label="车辆名称" prop="carname">
                        <el-input type="text" v-model="AddFormData.carname" autocomplete="off" ></el-input>
                    </el-form-item>
                    <el-form-item label="车辆类型" prop="typeId">
                        <el-select v-model="AddFormData.typeId" filterable placeholder="请选择">
                            <el-option
                                    v-for="item in types"
                                    :key="item.id"
                                    :label="item.typeName"
                                    :value="item.id">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="车辆品牌" prop="brandId">
                        <el-select v-model="AddFormData.brandId" filterable placeholder="请选择">
                            <el-option
                                    v-for="item in brands"
                                    :key="item.id"
                                    :label="item.name"
                                    :value="item.id">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="车辆配置" prop="configId">
                        <el-select v-model="AddFormData.configId" filterable placeholder="请选择">
                            <el-option
                                    v-for="item in configs"
                                    :key="item.id"
                                    :label="item.configName"
                                    :value="item.id">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <!--<el-form-item label="车辆识别码" prop="vin">
                        <el-input type="text" v-model="AddFormData.vin" autocomplete="off"></el-input>
                    </el-form-item>-->
                    <el-form-item label="购买价格" prop="buyPrice">
                        <el-input type="text" v-model="AddFormData.buyPrice" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="所属店铺" prop="shopId">
                        <el-select v-model="AddFormData.shopId" filterable placeholder="请选择">
                            <el-option
                                    v-for="item in shops"
                                    :key="item.id"
                                    :label="item.shopName"
                                    :value="item.id">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="出租价格" prop="rentalPrice">
                        <el-input type="text" v-model="AddFormData.rentalPrice" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="介绍" prop="intro">
                        <el-input type="textarea" v-model="AddFormData.intro" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="车辆状态" prop="status">
                        <template>
                            <el-radio v-model="AddFormData.status" :label="1">可出租</el-radio>
                            <el-radio v-model="AddFormData.status" :label="2">维修中</el-radio>
                            <el-radio v-model="AddFormData.status" :label="3">出租中</el-radio>
                            <el-radio v-model="AddFormData.status" :label="4">已停用</el-radio>
                        </template>
                    </el-form-item>
                    <el-form-item label="保险" prop="safeStatus">
                        <template>
                            <el-radio v-model="AddFormData.safeStatus" :label="0">已购买</el-radio>
                            <el-radio v-model="AddFormData.safeStatus" :label="1">未购买</el-radio>
                        </template>
                    </el-form-item>

                    <el-form-item>
                        <el-button @click="AddDialogVisible = false">取 消</el-button>
                        <el-button type="primary" @click="confirmAddInfo">确 定</el-button>
                    </el-form-item>
                </el-form>
                <!--<span slot="footer" class="dialog-footer">
                  <el-button @click="AddDialogVisible = false">取 消</el-button>
                  <el-button type="primary" @click="confirmAddBrand">确 定</el-button>
                </span>-->
            </el-dialog>

            <!--添加弹框的 表单 -->
            <el-dialog
                    title="车辆图片"
                    :visible.sync="ImageDialogVisible"
                    width="50%"
            >
                <el-card class="box-card">
                    <!-- 搜索与添加区域 -->
                    <el-row :gutter="20">
                        <el-col :span="4">
                            <el-button type="primary" @click="AddImage">添加图片</el-button>
                        </el-col>
                    </el-row>
                    <el-table
                            :data="ImagetableData"
                            stripe
                            border
                            style="width: 100%;">
                        <el-table-column
                                prop="id"
                                label="id"
                        >
                        </el-table-column>
                        <el-table-column
                                prop="url"
                                label="图片"
                                align="center"
                        >
                            <template slot-scope="scope">
                                <img :src="scope.row.url" width="100" height="60px" />
                            </template>
                        </el-table-column>
                        <el-table-column
                                fixed="right"
                                label="操作"
                                align="center"
                        >
                            <template slot-scope="scope">
                                <el-button type="primary" icon="el-icon-edit" @click="uploadImage(scope.row.id)"  size="medium" circle></el-button>
                                <el-button type="danger" icon="el-icon-delete"  size="medium" @click="delImage(scope.row.id)" circle></el-button>
                            </template>
                        </el-table-column>
                    </el-table>


                </el-card>
            </el-dialog>

            <!-- 修改图片的弹框 -->
            <el-dialog
                    title="图片上传"
                    :visible.sync="uploadImageDialogVisible"
                    width="30%"
                    @close="closeImage"
            >

                <el-upload
                        class="avatar-uploader"
                        action="http://localhost:60/sys/upload/uploadFile"
                        :headers="importHeaders"
                        :show-file-list="false"
                        :on-success="handleAvatarSuccess"
                >
                    <img v-if="imageUrl" :src="imageUrl" class="avatar" width="100" height="100">
                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>

                <span slot="footer" class="dialog-footer">
                          <el-button @click="uploadImageDialogVisible = false">取 消</el-button>
                          <el-button type="primary" @click="updateImage">确 定</el-button>
                        </span>
            </el-dialog>


            <!-- 添加图片的弹框 -->
            <el-dialog
                    title="图片上传"
                    :visible.sync="addImageDialogVisible"
                    width="30%"
                    @close="closeImage"
            >

                <el-upload
                        class="avatar-uploader"
                        action="http://localhost:60/sys/upload/uploadFile"
                        :headers="importHeaders"
                        :show-file-list="false"
                        :on-success="handleAvatarSuccess"
                >
                    <img v-if="imageUrl" :src="imageUrl" class="avatar" width="100" height="100">
                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>

                <span slot="footer" class="dialog-footer">
                          <el-button @click="addImageDialogVisible = false">取 消</el-button>
                          <el-button type="primary" @click="confirmAddImage">确 定</el-button>
                        </span>
            </el-dialog>
        </el-card>
    </div>
</template>

<script>
    var mytoken = sessionStorage.getItem("token");
    export default {
        name: "info",
        data(){
            return{
                //类型下拉框
                types:[],
                //品牌下拉框
                brands:[],
                //配置下拉框
                configs:[],
                //店铺下拉框
                shops:[],
                //查询条件
                query:"",
                //当前页码
                currentPage: 1,
                //每页显示记录
                pageSize:5,
                //总条数
                total:0,
                //当前的记录数据
                tableData: [],
                //是否打开修改弹框 true 打开 false 关闭
                EditDialogVisible: false,
                //修改弹框表单的数据
                EditFormData:{},
                //修改弹框 表单的 规则
                EditFormInfos:{
                    carname:[
                        {required:true,message:"名称不能为空",trigger:"blur"}
                    ],
                    typeId:[
                        {required:true,message:"类型不能为空",trigger:"blur"}
                    ],
                    brandId:[
                        {required:true,message:"品牌不能为空",trigger:"blur"}
                    ],
                    configId:[
                        {required:true,message:"配置不能为空",trigger:"blur"}
                    ],
                    shopId:[
                        {required:true,message:"店铺不能为空",trigger:"blur"}
                    ],
                    intro:[
                        {required:true,message:"介绍不能为空",trigger:"blur"},
                        {min:0,max:255,message: "介绍的长度必须为0~255",trigger: "blur"}
                    ],
                    buyPrice:[
                        {required:true,message:"购买价格不能为空",trigger:"blur"},
                        {pattern: /(^[1-9]\d*$)/, message: '必须为正整数', trigger: 'blur'}
                    ],
                    status:[
                        {required:true,message:"状态不能为空",trigger:"blur"}
                    ],
                    rentalPrice:[
                        {required:true,message:"出租价格不能为空",trigger:"blur"},
                        { pattern: /(^[1-9]\d*$)/, message: '必须为正整数', trigger: 'blur'}
                    ],
                    safeStatus:[
                        {required:true,message:"保险状态不能为空",trigger:"blur"}
                    ],

                },
                //是否打开 添加弹框
                AddDialogVisible: false,
                //添加表单的数据
                AddFormData:{},
                //添加表单的规则
                AddFormInfos:{
                    carname:[
                        {required:true,message:"名称不能为空",trigger:"blur"}
                    ],
                    typeId:[
                        {required:true,message:"类型不能为空",trigger:"blur"}
                    ],
                    brandId:[
                        {required:true,message:"品牌不能为空",trigger:"blur"}
                    ],
                    configId:[
                        {required:true,message:"配置不能为空",trigger:"blur"}
                    ],
                    shopId:[
                        {required:true,message:"店铺不能为空",trigger:"blur"}
                    ],
                    intro:[
                        {required:true,message:"介绍不能为空",trigger:"blur"},
                        {min:0,max:255,message: "介绍的长度必须为0~255",trigger: "blur"}
                    ],
                    buyPrice:[
                        {required:true,message:"购买价格不能为空",trigger:"blur"},
                        { pattern: /(^[1-9]\d*$)/, message: '必须为正整数', trigger: 'blur'}
                    ],
                    status:[
                        {required:true,message:"状态不能为空",trigger:"blur"}
                    ],
                    rentalPrice:[
                        {required:true,message:"出租价格不能为空",trigger:"blur"},
                        { pattern: /(^[1-9]\d*$)/, message: '必须为正整数', trigger: 'blur'}
                    ],
                    safeStatus:[
                        {required:true,message:"保险状态不能为空",trigger:"blur"}
                    ],
                },
                //是否打开图片弹窗
                ImageDialogVisible: false,
                //图片信息
                ImagetableData: [],
                //是否打开修改弹框
                uploadImageDialogVisible: false,
                importHeaders: {token: mytoken},
                imageUrl: '',
                imageId: '',
                InfoId: '',
                //是否打开添加弹框
                addImageDialogVisible: false,
            }
        },
        //页面加载自动执行
        created() {
            this.initInfoTable(this.currentPage,this.pageSize);
            this.type();
            this.brand();
            this.config();
            this.shop();
        },
        methods: {
            //类型下拉框
            type(){
                var that = this;
                this.$http.get(`/hire/type/getAllType`).then(function (res) {
                    if (res.data.code == 200) {
                        that.types = res.data.data;
                    } else {
                        that.$message.error("信息加载失败");
                    }
                })
            },
            //品牌下拉框
            brand(){
                var that = this;
                this.$http.get(`/hire/brand/getAllBrand`).then(function (res) {
                    if (res.data.code == 200) {
                        that.brands = res.data.data;
                    } else {
                        that.$message.error("信息加载失败");
                    }
                })
            },
            //配置下拉框
            config(){
                var that = this;
                this.$http.get(`/hire/config/getAllConfig`).then(function (res) {
                    if (res.data.code == 200) {
                        that.configs = res.data.data;
                    } else {
                        that.$message.error("信息加载失败");
                    }
                })
            },
            //店铺下拉框
            shop(){
                var that = this;
                this.$http.get(`/hire/shop/getAllShop`).then(function (res) {
                    if (res.data.code == 200) {
                        that.shops = res.data.data;
                    } else {
                        that.$message.error("信息加载失败");
                    }
                })
            },

            //修改每页几条的方法
            handleSizeChange(val) {
                this.pageSize = val;
                this.initInfoTable(this.currentPage, this.pageSize);
            },
            //修改页数的方法
            handleCurrentChange(val) {
                this.currentPage = val;
                this.initInfoTable(this.currentPage, this.pageSize);
            },
            //模糊查询按钮的方法
            serch() {
                this.currentPage = 1;
                this.pageSize = 5;
                this.initInfoTable(this.currentPage, this.pageSize);
            },
            //初始化表格的方法
            initInfoTable(currentPage, pageSize) {
                var that = this;
                this.$http.post(`/hire/info/findInfoByPage/${currentPage}/${pageSize}?query=${this.query}`).then(function (res) {
                    if (res.data.code == 200) {
                        that.tableData = res.data.data.records;
                        that.total = res.data.data.total;
                    } else {
                        that.$message.error("信息加载失败");
                    }
                })
            },
            //修改弹框回显的方法
            EditInfo(id) {
                this.EditDialogVisible = true;
                //console.log(userId);
                var that = this;
                this.$http.get(`/hire/info/getInfoById/${id}`).then(function (res) {
                    that.EditFormData = res.data.data;
                })
            },

            closeAll(){
                this.$refs.EditRuleForm.resetFields();
            },
            closeImage(){
                this.imageUrl='';
            },
            //提交修改弹框的方法
            confirmEditInfo() {
                var that = this;
                this.$refs['EditRuleForm'].validate((valid) => {
                    if (valid) {
                        that.$http.put("/hire/info/updateInfo", this.EditFormData).then(function (res) {
                            if (res.data.code == 200) {
                                that.$message.success("修改成功");
                                that.EditDialogVisible = false;
                                that.initInfoTable(that.currentPage, that.pageSize);
                            } else {
                                that.$message.error("修改失败");
                            }
                        })
                    }
                })
            },

            //修改生产状态的方法
            changeStatus(id, status) {
                var that = this;
                this.$http.put(`/hire/info/updateStatusByInfoId/${id}/${status}`).then(function (res) {
                    if (res.data.code == 200) {
                        that.$message.success(res.data.msg);
                        that.initShopTable(that.currentPage, that.pageSize);
                    } else {
                        that.$message.error(res.data.msg);
                    }
                })
            },

            //添加按钮的弹框的方法
            addInfo() {
                this.AddDialogVisible = true;
            },
            //提交添加表单的方法
            confirmAddInfo() {
                //console.log(this.AddFormData);
                var that = this;
                this.$refs['EditRuleForm'].validate((valid) => {
                    if (valid) {
                        this.$http.post("/hire/info/addInfo", this.AddFormData).then(function (res) {
                            if (res.data.code == 200) {
                                //console.log(res);
                                that.$message.success(res.data.msg);
                                that.AddDialogVisible = false;
                                that.initInfoTable(that.currentPage, that.pageSize);
                            } else {
                                that.$message.error(res.data.msg);
                            }
                        })
                    }
                })
            },
            //删除车辆
            delInfo(id,status){
                var that=this;

                this.$confirm('是否删除该类型?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    if (`${status}`!=4){
                        that.$message.error("该车辆还未停用，不能删除！");
                    }else {
                        //that.$message.success("该车辆还未停用，不能删除！");
                        this.$http.get(`/hire/info/delById/${id}`).then(function(resp){
                            if (resp.data.code == 200) {
                                //console.log(res);
                                if (that.total%that.pageSize==1){
                                    that.currentPage--;
                                }else {
                                    that.currentPage = that.currentPage;
                                }
                                that.$message.success(resp.data.msg);
                                that.initInfoTable(that.currentPage, that.pageSize);
                            } else {
                                that.$message.error(resp.data.msg);
                            }
                        });
                    }

                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });

            },
            //图片的弹框的方法
            ImageInfo(id) {
                this.ImageDialogVisible = true;
                this.InfoId=`${id}`;
                var that = this;
                this.$http.get(`/hire/image/getImageById/${id}`).then(function (res) {
                    that.ImagetableData = res.data.data;
                })
            },
            //点击修改的弹框
            uploadImage(id){
                this.imageId = `${id}`;
                this.uploadImageDialogVisible=true;
            },
            handleAvatarSuccess(res, file) {
                this.imageUrl=res.data;
            },
            //提交修改头像的弹框
            updateImage(){
                var that = this;
                var imgUrl=this.imageUrl;
                this.$http.post(`/hire/image/updateImageByImageId/${this.imageId}?url=${this.imageUrl}`).then(function (res){
                    if (res.data.code==200){
                        that.$message.success(res.data.msg);
                        that.uploadImageDialogVisible = false;
                        that.ImageInfo(that.InfoId);
                    }else {
                        that.$message.error(res.data.msg);
                    }
                })
            },

            //打开添加弹窗
            AddImage(){
                this.addImageDialogVisible=true;
            },

            //提交添加头像的弹框
            confirmAddImage(){
                var that = this;
                var imgUrl=this.imageUrl;
                this.$http.post(`/hire/image/addImageByInfoId?infoId=${this.InfoId}&url=${this.imageUrl}`).then(function (res){
                    if (res.data.code==200){
                        that.$message.success(res.data.msg);
                        that.addImageDialogVisible = false;
                        that.ImageInfo(that.InfoId);
                    }else {
                        that.$message.error(res.data.msg);
                    }
                })
            },

            delImage(id){
                var that=this;

                this.$confirm('是否删除该图片?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.$http.get(`/hire/image/delById/${id}`).then(function(resp){
                        if (resp.data.code == 200) {
                            //console.log(res);
                            that.$message.success(resp.data.msg);
                            that.ImageInfo(that.InfoId);
                        } else {
                            that.$message.error(resp.data.msg);
                        }
                    });
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            }
        }
    }
</script>

<style>
    .avatar-uploader .el-upload {
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
    }
    .avatar-uploader .el-upload:hover {
        border-color: #409EFF;
    }
    .avatar-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 178px;
        height: 178px;
        line-height: 178px;
        text-align: center;
    }
    .avatar {
        width: 178px;
        height: 178px;
        display: block;
    }
</style>